class ContentReview extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nodeTrees: '',
            page: 1,
            list: ''
        }
    }

    componentDidMount() {
        layui.use(['form', 'laypage'], function () {
            // noinspection ES6ModulesDependencies
            this.form = layui.form();
            this.form.on('select(resourceType)', function (data) {
                this.queryList();
            }.bind(this));

            postJson('/cms/appResource/queryNodeTree.x', null, function (data) {
                this.setState({
                    nodeTrees: data.data,
                }, function () {
                    this.form.render('select');
                    this.queryList();
                });
            }.bind(this));
        }.bind(this));
    }

    queryList() {
        let param = {};
        param.pageSize = 8;
        //保证通过之后还是在当前页
        if (this.state.page > 1 && this.state.list.length === 1) {
            param.page = this.state.page - 1;
        } else {
            param.page = this.state.page;
        }
        param.type_code = this.refs.resourceType.value !== '-1' ? this.refs.resourceType.value : '';
        param.isApproved = "R";
        this.updateList(param);
    }

    updateList(param) {
        postJson('/cms/appResource/queryAllResourceList.x', $.param(param), function (data) {
            this.setState({
                page: param.page,
                list: data.data.list
            });
            if (param.page === 1) {
                layui.laypage({
                    cont: 'contentListPage'
                    , pages: Math.ceil(data.data.size / param.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            param.page = row.curr;
                            this.updateList(param);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    showImage(url) {
        if (url) {
            layer.photos({
                photos: {
                    "title": "图片",
                    "data": [
                        {
                            "src": url
                        }
                    ]
                }, anim: 5
            });
        } else {
            layer.msg("此记录无照片!");
        }
    }

    customContentView(customContent) {
        let newView = [];
        let customContents = eval('(' + customContent + ')');
        for(let key in customContents){
            newView.push(<p>❖&nbsp;&nbsp;{customContents[key].customKey}：{customContents[key].customValue}</p>)
        }
        return newView;
    }

    tbody() {
        if (this.state.list) {
            return this.state.list.map(function (array) {
                return (<tr>
                    <td>
                        <div className="Center-Container"
                             style={{border: '1px solid #CDCDC1', width: '70px', height: '50px'}}>
                            <img className="Absolute-Center" style={{'max-height': '90%', 'max-width': '90%'}}
                                 onClick={() => this.showImage(array.icon_url)} src={array.icon_url}/>
                        </div>
                    </td>
                    <td>{array.title}</td>
                    <td>{array.description}</td>
                    <td>{this.customContentView(array.customContent)}</td>
                    <td>
                        <a href={array.content_url} target="_blank" style={{color: 'blue'}}>{array.content_url}</a>
                    </td>
                    <td>{array.creator}</td>
                    <td>
                        <button type="button" className="layui-btn layui-btn-small layui-btn-normal"
                                onClick={() => this.approvedState(array.resource_id, 1)}>通过
                        </button>
                        <button type="button" className="layui-btn layui-btn-small layui-btn-danger"
                                onClick={() => this.approvedState(array.resource_id, 2)}>打回
                        </button>
                    </td>
                </tr>)
            }.bind(this))
        }
    }

    approvedState(resourceId, i) {
        let param = {};
        param.resource_id = resourceId;
        if (i === 1) {
            layer.confirm('通过审核后，这个资源将可以被展示到客户端。', {
                btn: ['确定', '取消']
            }, function () {
                param.isApproved = "Y";
                param.approvedState = "审核通过";
                postJson("/cms/appResource/approvedState.x", $.param(param), function (data) {
                    this.queryList();
                    layer.closeAll();
                }.bind(this));
            }.bind(this));
        } else if (i === 2) {
            layer.open({
                type: 1,
                title: '请输入打回原因',
                content: '<div style="padding: 10px"><textarea id="textarea" name="textarea" rows="5" cols="45"></textarea></div>',
                btn: ['确定', '取消'],
                btnAlign: 'c', //按钮居中
                yes: function () {
                    param.isApproved = "N";
                    param.approvedState = $("textarea[name='textarea']").val();
                    postJson("/cms/appResource/approvedState.x", $.param(param), function (data) {
                        this.queryList();
                        layer.closeAll();
                    }.bind(this));
                }.bind(this),
                btn2: function () {
                    layer.closeAll();
                }
            });
        }
    }

    nodeTreeView() {
        if (this.state.nodeTrees) {
            return this.state.nodeTrees.map(function (nodeTree) {
                return (<option value={nodeTree.type_code}>{nodeTree.type_name}</option>)
            })
        }
    }

    render() {
        return <div className="box box-primary">
            <div className="box-frame">
                <form id="form" className="layui-form layui-form-pane" action="">
                    <div className="layui-form-item">
                        <label className="layui-form-label">资源分类</label>
                        <div className="layui-input-inline">
                            <select name="resourceType" ref="resourceType" data-filter="resourceType">
                                <option value="-1" selected="selected">默认</option>
                                {this.nodeTreeView()}
                            </select>
                        </div>
                    </div>
                    <div className="layui-form-item">
                        <table className="layui-table">
                            <colgroup>
                                <col width="100"/>
                                <col width="200"/>
                                <col/>
                                <col/>
                                <col/>
                                <col width="100"/>
                                <col width="150"/>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>图片</th>
                                <th>标题</th>
                                <th>描述</th>
                                <th>自定义数据</th>
                                <th>内容地址</th>
                                <th>创建人</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody>
                            {this.tbody()}
                            </tbody>
                        </table>
                        < div style={{'float': 'right', 'margin-right': '1px'}} id="contentListPage"/>
                        <div style={{clear: "both"}}/>
                    </div>
                </form>
            </div>
        </div>
    }
}

ReactDOM.render(
    <ContentReview/>,
    document.getElementById('example')
);